<template>
  <view
    class="content u-skeleton"
    :style="{
      backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/user/page_bg.jpg)`,
      paddingBottom: `${tabBarHeight}px`,
    }"
  >
    <uni-nav-bar
      backgroundColor="transparent"
      color="#000000"
      :border="false"
      :statusBar="true"
      fixed
      leftWidth="0"
      rightWidth="0"
      title=""
      :custom-bg-style="{
        background: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/user/page_bg.jpg) no-repeat center top`,
        backgroundSize: '100% auto',
      }"
    >
      <template v-slot>
        <view class="flex items-center navbar-center overflow" style="line-height: 88rpx;width: 770rpx;text-align: center">
          <!-- <image :src="`${VUE_APP_STATIC_URL}ui-static/img/logo.jpg`" style="height: 60rpx" mode="heightFix"></image> -->
          <image :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/logo-staging-black.png`" style="width: 376rpx" mode="widthFix"></image>
        </view>
      </template>
    </uni-nav-bar>
    <!-- 骨架屏 -->
    <Skeleton el-color="#efefef" bg-color="#fff" :loading="loading && isFirstComeIn" :animation="true"></Skeleton>
    <!-- 我的 -->
    <!-- <image class="top-bg" :src="`${VUE_APP_STATIC_URL}ui-static/img/user/topBg.png`"></image> -->
    <view class="page-content">
      <!-- 用户未登录 -->
      <view class="user-info-box" @click="jumpLogin" v-if="userItem.name === undefined">
        <image class="user-image u-skeleton-circle" :src="`${VUE_APP_STATIC_URL}ui-static/img/user/morentouxiang.png`" mode="widthFix"></image>
        <view class="user-info">
          <view class="user-logoin-title">
            <text class="u-skeleton-rect">点击登录</text>
          </view>
          <view class="user-logoin-lable">
            <text class="u-skeleton-rect">登录后享受更多权益~</text>
          </view>
        </view>
        <image class="user-info-right" :src="`${VUE_APP_STATIC_URL}ui-static/img/user/back.png`"></image>
        <view class="notice u-skeleton-circle">
          <view class="messNum" v-if="userItem.notRead > 0">{{ userItem.notRead }} </view>
        </view>
      </view>
      <!-- 用户已登陆 -->
      <view class="user-info-box" v-else>
        <image class="user-image u-skeleton-rect" @click="handleJump(`/zwx_category_page2/userModule/personalDetails`)" v-if="userItem.headImage" :src="userItem.headImage" style="border-radius: 50%"></image>
        <image class="user-image" v-else :src="`${VUE_APP_STATIC_URL}ui-static/img/user/morentouxiang.png`"> </image>
        <view class="user-info">
          <view class="user-logoin-title" v-if="userItem.name">{{ userItem.name }} </view>
          <!-- <view class="experience flex-items" @click="handleJump(`/zwx_category_page1/memberCenter/index`)">
            <label class="growth-value">成长值</label>
            <view class="experienceValue">{{ userItem.growth || 0 }} / {{ userItem.nextLevelGrowth || 0 }}</view>
          </view> -->
          <view class="experience flex items-center justify-center" @click="handleJump(`/zwx_category_page1/memberCenter/index`)">
            <image :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/user/zuanshi.png`" style="width: 25rpx; height: 25rpx"></image>
            <text>成长值：{{ userItem.growth || 0 }}</text>
          </view>
        </view>
        <view class="notice u-skeleton-circle" :style="{ backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/user/naoling.png)` }" @click="handleJump(`/zwx_category_page2/notice/system`)">
          <view class="messNum" v-if="userItem.notRead + userItem.unreadReply > 0">{{ userItem.notRead + userItem.unreadReply > 99 ? "99+" : userItem.notRead + userItem.unreadReply }} </view>
        </view>
      </view>
      <view class="datas_box flex items-center justify-between">
        <view class="flex flex-column items-center" @click="$jump(`/zwx_category_page2/userModule/memberAccount`)">
          <view class="nums">0</view>
          <view class="text">我的账户</view>
        </view>
        <view class="flex flex-column items-center" @click="$jump(`/zwx_category_page1/integral/index`)">
          <view class="nums">{{ userItem.credit || 0 }}</view>
          <view class="text">积分</view>
        </view>
        <view class="flex flex-column items-center" @click="$jump(`/zwx_category_page2/userModule/collection`)">
          <view class="nums">{{ userItem.collectCount || 0 }}</view>
          <view class="text">收藏</view>
        </view>
        <view class="flex flex-column items-center" @click="$jump(`/zwx_category_page2/userModule/coupon`)">
          <view class="nums">{{ userItem.platformCouponCount + userItem.shopCouponCount || 0 }}</view>
          <view class="text">卡券</view>
        </view>
      </view>
      <!-- 订单卡片 -->
      <view class="order-box">
        <view class="title">我的订单</view>
        <view class="flex items-center">
          <view class="order-item" v-for="orderCardItem in orderCardListRef" :key="orderCardItem.id" @click="handleJump(orderCardItem.jumpUrl)">
            <image class="order-item-image u-skeleton-circle" :src="orderCardItem.icon" mode="widthFix"> </image>
            <view class="order-item-text u-skeleton-rect">{{ orderCardItem.label }}</view>
            <view class="quan" v-if="userItem[orderCardItem.key] > 0">
              {{ userItem[orderCardItem.key] }}
            </view>
          </view>
        </view>
      </view>
      <!-- 大卡片 -->
      <view class="big_box flex items-center justify-between">
        <view class="big_box_item" :style="{ backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/user/qiandao_bg.png)` }" @click="$jump(`/zwx_category_page1/integral/sign`)">
          <view class="title">每日签到</view>
          <view class="desc">签到送积分</view>
        </view>
        <view class="big_box_item" :style="{ backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/user/huiyuan_bg.png)` }" @click="$jump(`/zwx_category_page1/memberCenter/index`)">
          <view class="title">会员中心</view>
          <view class="desc">领取升级福利</view>
        </view>
      </view>
      <!-- 第一个卡片 -->
      <view class="itemBox">
        <view class="item-btn" v-for="item in fastCardOneListRef" :key="item.id" @click="handleJump(item.jumpUrl)">
          <image class="item-btn-icon u-skeleton-circle" :src="item.icon" mode="widthFix"> </image>
          <view class="item-btn-text u-skeleton-rect">{{ item.label }}</view>
        </view>
      </view>
      <!-- 第二个卡片 -->
      <view class="itemBox">
        <view class="item-btn" v-for="item in fastCardTwoListRef" :key="item.id" @click="handleJump(item.jumpUrl)">
          <image class="item-btn-icon u-skeleton-circle" :src="item.icon" mode="widthFix"></image>
          <view class="item-btn-text u-skeleton-rect">{{ item.label }}</view>
        </view>
        <!--        <button open-type="contact"
                                class="item-btn btnNone">
                          <image class="item-btn-icon"
                                 :src="`${VUE_APP_STATIC_URL}ui-static/img/user/service.png`"
                                 mode="widthFix"></image>
                          <view class="item-btn-text">平台客服</view>
                        </button>-->
      </view>
    </view>
    <view class="copyright">
      <text>中科鑫智 版权所有</text>
      <text>粤ICP备19086489号-3</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject, nextTick } from "vue";
import Skeleton from "@/components/Skeleton";
import { fastCardOneListNew, fastCardTwoListNew, orderCardListNew } from "./index.data";
import { Services } from "@/utils/services";
// import { Encrypt } from '@/utils/secret'
import { request } from "@/utils/request";
import API from "@/config/api";
import { useStore } from "vuex";
import { Encrypt } from "@/utils/secret";
import { onShow } from "@dcloudio/uni-app";
import { VUE_APP_STATIC_URL } from "@/config/api";

const store = useStore();
const tabBarHeight = computed(() => store.state.globalSetting.appSetting.tabBarHeight);

const isFirstComeIn = ref(true);
const loading = ref(true);
const orderCardListRef = ref(orderCardListNew);
const fastCardOneListRef = ref(fastCardOneListNew);
const fastCardTwoListRef = ref(fastCardTwoListNew);
const cacheUserItem = ref({});
const userItem = ref({
  headImage: "",
  name: undefined,
});
const $jump = inject("$jump");

onShow(() => {
  nextTick(() => {
    if (uni.getStorageSync("storage_key")) {
      cacheUserItem.value = uni.getStorageSync("storage_key");
    } else {
      isFirstComeIn.value = true;
    }
    handleGetUser();
  });
});

const handleJump = url => {
  if (JSON.stringify(cacheUserItem.value) === "{}") {
    return true;
  }
  if (url.startsWith("function")) {
    const [key, funcName] = url.split(":");
    functionObj[funcName]();
  } else {
    $jump(url);
  }
};
const handleGetUser = () => {
  loading.value = true;
  request(API.GetUser, {}, "GET").then(res => {
    userItem.value = res.data;
    uni.setStorageSync("storage_userInfo", userItem.value);
    isFirstComeIn.value = false;
    loading.value = true;
  });
};

const jumpLogin = () => {
  uni.navigateTo({
    url: `/zwx_category_page2/userModule/login`,
  });
};

const flyToService = async () => {
  (await Services()).flyToService();
};

const emptyTip = () => {
  uni.showToast({
    title: "此功能暂未开放~",
    icon: "none"
  });
};

const functionObj = {
  flyToService,
  emptyTip
};
</script>

<style lang="scss" scoped>
.content {
  min-height: 100%;
  overflow: auto;
  position: relative;
  padding-bottom: 150rpx;
  width: 100%;
  background-color: #f5f3f1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  .itemBox {
    display: flex;
    flex-flow: wrap;
    padding-top: 30rpx;
    border-radius: 12rpx;
    background: #ffffff;
    width: 690rpx;
    margin: 30rpx auto 0 auto;
  }

  /* background-color: #f8f8f8; */
  .top-bg {
    width: 100%;
    height: 400rpx;
    // margin-top: -50rpx;
  }

  .page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
    padding-top: 10rpx;
    // margin-top: -320upx;

    .user-info-box {
      width: 100%;
      box-sizing: border-box;
      padding: 30upx;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;

      .notice {
        width: 36rpx;
        height: 41rpx;
        position: absolute;
        top: 0;
        right: 50rpx;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;

        .messNum {
          background: #ff5500;
          border-radius: 50%;
          color: #ffffff;
          text-align: center;
          margin: 0rpx 0 0 30rpx;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          font-size: 20rpx;
          position: absolute;
          right: -20rpx;
          top: -10rpx;
        }
      }

      .user-image {
        width: 126upx;
        height: 126upx;
      }

      .user-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 20upx;
        box-sizing: border-box;
        z-index: 10;

        .user-logoin-title {
          font-size: 36upx;
          font-weight: 500;
          color: #000;
        }

        .user-logoin-lable {
          font-size: 24upx;
          font-weight: 400;
          color: #000;
          margin-top: 20upx;
        }

        .experience {
          height: 37rpx;
          background: #fff4ea;
          border-radius: 19rpx;
          width: 200rpx;

          text {
            margin-left: 6rpx;
            color: #6c6c6c;
            font-size: 22rpx;
          }
        }
      }

      .user-info-right {
        width: 30upx;
        height: 30upx;
      }
    }

    .datas_box {
      width: 690rpx;
      margin: 0 auto 30rpx;
      .nums {
        font-family: Douyin Sans;
        font-weight: bold;
        font-size: 44rpx;
        color: #3b3b3b;
      }
      .text {
        margin-top: 12rpx;
        font-family: Source Han Sans CN VF;
        font-weight: 400;
        font-size: 24rpx;
        color: #6c6c6c;
      }
    }

    .order-box {
      width: 690upx;
      background: #fff;
      margin: auto;
      z-index: 10;
      border-radius: 12rpx;
      padding: 28rpx 0 31rpx 0;

      .title {
        font-family: Source Han Sans CN VF;
        font-weight: 400;
        font-size: 28rpx;
        color: #3b3b3b;
        line-height: 32rpx;
        margin-bottom: 18rpx;
        margin-left: 21rpx;
      }

      .order-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .quan {
          position: absolute;
          right: 40upx;
          top: 10upx;
          border: 1px solid red;
          color: #ffffff;
          background-color: red;
          border-radius: 50%;
          font-size: 16rpx;
          width: 30upx;
          height: 30upx;
          line-height: 30upx;
          text-align: center;
        }

        .order-item-image {
          width: 62rpx;
          height: 62rpx;
        }

        .order-item-text {
          font-size: 24rpx;
          margin-top: 13rpx;
          color: #6c6c6c;
        }
      }
    }

    .big_box {
      width: 690rpx;
      margin: 24rpx auto 0;
      .big_box_item {
        width: 333rpx;
        height: 136rpx;
        background: #ffffff;
        border-radius: 12rpx;
        background-position: 196rpx 15rpx;
        background-repeat: no-repeat;
        background-size: 100rpx 100rpx;
        font-family: Source Han Sans CN VF;
        font-weight: 400;
        overflow: hidden;
        padding-left: 27rpx;
        box-sizing: border-box;
        line-height: 1;
        .title {
          font-size: 28rpx;
          color: #3b3b3b;
          margin-bottom: 16rpx;
          margin-top: 35rpx;
        }
        .desc {
          font-size: 24rpx;
          color: #9f9f9f;
        }
      }
    }

    .item-btn {
      width: 25%;
      box-sizing: border-box;
      background-color: #fff;
      text-align: center;
      margin-bottom: 40rpx;

      .item-btn-icon {
        width: 90upx;
        height: 90upx !important;
        display: block;
        margin: 0 auto;
      }

      .item-btn-text {
        font-size: 28upx;
        font-weight: 500;
        flex: 1;
        color: rgba(102, 102, 102, 1);
        display: inline-block;
        min-width: 120rpx;
        margin-top: 10rpx;
      }

      .messNum {
        margin-left: 10rpx;
        font-size: 16rpx;
        background-color: red;
        color: #ffffff;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        margin-top: -5rpx;
        line-height: 30rpx;
        text-align: center;
      }

      .item-btn-right {
        width: 24upx;
        height: 24upx;
      }
    }

    .btnNone {
      margin: 0;
      padding: 0;
      line-height: normal;

      &::after {
        display: none;
      }
    }

    .mt20 {
      margin-top: 20upx;
    }

    .mt1 {
      margin-top: 1upx;
    }
  }

  .copyright {
    text-align: center;
    padding: 30rpx 0 20rpx;
    width: 100%;

    text {
      display: block;
      font-size: 20rpx;
      line-height: 30rpx;
      color: #c5cacf;
    }
  }
}
</style>
